<template>
  <div>
    <div class="product_empty">
      <img :src="emptyUrl" alt=""/>
      <div class="paragraph-p2-light">{{ emptyString }}</div>
    </div>
    <div class="add-button-div">
      <div class="add-button" v-if="addButtonString">
        <svg class="add-img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 12H16" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M12 16V8" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="add-span body-heavy" @click="addProduct">{{ addButtonString }}</span>
      </div>
    </div>

  </div>
</template>

<script>
import ProductEmpty from '@/static/images/product/product-empty.png'
import SearchEmpty from '@/static/images/product/search-empty.png'
import TodoEmpty from '@/static/images/todo/todo-empty.png'
import OrderEmpty from '@/static/images/order/order-empty.png'
import ReportEmpty from '@/static/images/report/report-empty.png'
import ProfileEmpty from '@/static/images/profile/profile-empty.png'

export default {
  name: 'ProductEmpty',
  props: {
    listCode: {type: Number, default: () => this.GLOBAL.listType.todo},
    listItemCode: {type: Number, default: () => this.GLOBAL.listItemType.todo.waiting},
  },
  data() {
    return {
      listTypeList: this.GLOBAL.listType,
      listItemTypeList: this.GLOBAL.listItemType,
      emptyUrl: '',
      emptyString: '',
      addButtonString: '',
      addRightButtonString: '',
    };
  },
  mounted: function () {
    switch (this.listCode) {
      case this.listTypeList.todo:
        switch (this.listItemCode) {
          case this.listItemTypeList.todo.waiting:
            this.emptyUrl = TodoEmpty
            this.emptyString = '好棒！工作全都完成了哦～'
            break
          case this.listItemTypeList.todo.done:
            this.emptyUrl = TodoEmpty
            this.emptyString = '还没有已完成的事项，快去看看待办清单吧～'
            break
        }
        break
      case this.listTypeList.product:
        switch (this.listItemCode) {
          case this.listItemTypeList.product.toStorage:
            this.emptyUrl = ProductEmpty
            this.emptyString = '暂没有拟入库商品~'
            this.addButtonString = '新增拟入库商品'
            this.addButtonUrl = '/product/' + this.listItemCode + '/add'
            break
          case this.listItemTypeList.product.storage:
            this.emptyUrl = ProductEmpty
            this.emptyString = '暂没有正式入库商品～'
            this.addButtonString = '新增正式入库商品'
            this.addButtonUrl = '/product/' + this.listItemCode + '/add'
            break
          case this.listItemTypeList.product.removed:
            this.emptyUrl = ProductEmpty
            this.emptyString = '暂没有已下架商品～'
            break
        }
        break
      case this.listTypeList.order:
        this.emptyUrl = OrderEmpty
        this.emptyString = '暂没有相关订单～'
        this.addButtonString = '我要出单'
        this.addButtonUrl = '/order/add'
        break
      case this.listTypeList.report:
        this.emptyUrl = ReportEmpty
        this.emptyString = '暂没有相关统计～'
        break
      case this.listTypeList.profile:
        switch (this.listItemCode) {
          case this.listItemTypeList.profile.onJob:
            this.emptyUrl = ProfileEmpty
            this.emptyString = '暂没有相关员工信息～'
            this.addButtonString = '创建员工账号'
            this.addButtonUrl = this.GLOBAL.pathSetting.profile.add
            break
          case this.listItemTypeList.profile.outJob:
            this.emptyUrl = ProfileEmpty
            this.emptyString = '暂没有相关员工信息～'
            break
        }
        break
      case this.listTypeList.search:
        this.emptyUrl = SearchEmpty
        this.emptyString = '没有搜到相关商品哦～'
        break
    }
  },
  methods: {
    addProduct() {
      this.$router.push(this.addButtonUrl);
    },
  },
};
</script>

<style scoped>
.product_empty {
  height: 134px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product_empty > img {
  width: 96px;
  height: 96px;

  opacity: 0.8;
  margin: 16px 0;
  display: inline-block;
}

.product_empty > div {
  height: 22px;
  width: 140px;
  text-align: center;
  color: #737373;
  display: inline-block;
}
.add-button-div{
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-button {
  height: 48px;
  margin-top: 24px;
  border-radius: 24px;
  background: #fcd538;
  display: flex;
  align-items: center;
  justify-items: center;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
}
.add-img {
  height: 24px;
  width: 24px;
  padding-left: 16px;
}
.add-span {
  height: 20px;
  padding: 0 16px 0 8px;
  text-align: center;
}
</style>